<template>
    <div class="comFlex">
        <div class="rightDiv comLeft25">
          <div style="padding-top: 30px;padding-left: 18px;">
             <el-row :gutter="24">
              <el-col :span="8">
                <div class="comFlex comFlexCenter">
                  <label class="wordNoBreak textRight comWidth78">部门名称:</label><el-input class="comWidth400" v-model="menuName"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="comFlex comFlexCenter">
                  <label class="wordNoBreak textRight comWidth78">状态:</label>
                  <el-select
                      v-model="status"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="8">
                <el-button type="primary" :icon="Search" @click="getDept">查询</el-button>
                <el-button :icon="RefreshRight">重置</el-button>
              </el-col>
            </el-row>
            <div class="comTop20">
              <el-button round v-for="(item,i) in btnList" :key="i" :type="item.type" @click="item.func">
                {{ item.label }}
              </el-button>
            </div>
          </div>
            <Table :columns="tableColumns" :total="total" :tableData="tableData" class="comTop10" style="padding-left: 20px;height: 80%;">
                <template #status="scope">
                     <el-switch
                        v-model="scope.row.status"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    />
                </template>
                 <template #opt="scope">
                    <el-button @click="item.func(scope)" :type="item.type" link v-for="(item,i) in btnArr" :key="i">
                        {{ item.label }}
                    </el-button>
                </template>
            </Table>
        </div>
        <comForm :rules="formRules" @save="saveForm" :popupWidth="650" @cancel="cancel" :value="formValue" v-model:dialogVisible="dialogVisible" :dialogTitle="dialogTitle" :formConfig="currentFormConfig">

        </comForm>
    </div>
</template>
<script setup>
import comForm from '@/components/comForm.vue'
import Table from '@/components/Table.vue'
import { recursionFun, handleTree, getLabel, getValue, resetForm ,isInteger} from '@/tools/tools.js'
import { computed, onMounted, reactive, ref } from 'vue'
import { deptClass } from '@/api/api'
import { RefreshRight, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const total = ref()
const dialogVisible = ref(false)
onMounted(() => {
  getDept()
})
const formValue = reactive({
    parentId : '',
    name : '',
    sortOrder : '',

})
const menuName = ref('')
const getDept = () => {
  let params = {
    deptName : menuName.value
  }
  deptClass.getDeptList(params).then(res => {
    const { code, data} = res    
    if(code == 0){
      tableData.value = handleTree(data, "id")
    }
  })
}
const statusList = ref([
  {
    label :'',
    value : ''
  },
  {
    label :'',
    value : ''
  },
])
const status = ref('')
const parentMenu = ref([])
const menuIcon = ref([])
const saveForm = () => {
  if(isUpdate.value) {
    deptClass.addDept({...formValue}).then(res => {
      if(res.code == 0){
        ElMessage.success('新增成功!')
        resetForm(formValue)
        dialogVisible.value = false
        getDept()
      }else{
        ElMessage.error('创建失败!')
      }
  })
  }else{
    formValue.parentId  = isInteger(formValue.parentId) ? formValue.parentId : getValue(menuArr.value,formValue.parentId)
    deptClass.updateDept({...formValue}).then(res => {
      if(res.code == 0){
        ElMessage.success('更新成功!')
        dialogVisible.value = false
        resetForm(formValue)
        getDept()
      }else{
        ElMessage.error('更新失败')
      }
    })
  }
}
const formRules = reactive(
  {
  }
)
const getParentMenu = () => {
  deptClass.getSelectDept().then(res => {
    const { code, data} = res
    if(code == 0){
      parentMenu.value = []
      data.forEach(item => {
        parentMenu.value.push({
          value : item.deptId,
          label : item.name
        })
      })
    }
  })
}

const menuList = computed(() => {
  return parentMenu
})
const currentFormConfig = computed(() => {
  return formConfig
})
const formConfig = reactive({
  labelWidth : 90,
  formItemList : [
    {
      label : '上级部门：',
      prop : 'parentId',
      type : 'select',
      placeholder : '请输旋转',
      getSelectList : getParentMenu,
      optList : menuList.value
    },
     {
      label : '部门名称：',
      prop : 'name',
      type : 'input',
    },
     {
      label : '排序:',
      prop : 'sortOrder',
      type : 'input',
     },
    //  {
    //   label : '状态：',
    //   prop : 'visible',
    //   type : 'radio',
    //   optList : [
    //     {
    //       label : '启用',
    //       value : '0'
    //     },
    //     {
    //       label :'禁用',
    //       value : '1'
    //     }
    //   ]
    // }
  ]
})

const cancel = () => {
  dialogVisible.value = false
}

const dialogTitle = ref('')
const btnList = ref([
  {
    label : '新增',
    func : () => {
      dialogTitle.value = '新增'
      dialogVisible.value = isUpdate.value = true
    },
    type : 'warning',
  },
   {
    label : '删除',
    func : () =>{

    } ,
    type : 'success',
  },
])

const deleFun = (item) => {

}
const detailFun = (item) => {

}
const menuArr = ref([])
const isUpdate = ref(false)
const btnArr = ref([
    {
        label : '修改',
        func : (item) => {
          const { row } = item
          deptClass.getSelectDept().then(res => {
            const { code, data} = res
            if(code == 0){
              parentMenu.value = []
              data.forEach(item => {
                parentMenu.value.push({
                  value : item.deptId,
                  label : item.name
                })
              })
            }
          })
          formValue.parentId = getLabel(parentMenu.value, row.parentId)
          formValue.name = row.name
          formValue.sortOrder = row.weight
          isUpdate.value = false
          dialogTitle.value = '修改'
          dialogVisible.value = true
          formValue.deptId = row.id
        },
        type : 'primary'
    },
    {
        label : '删除',
        func : (item) => {
          ElMessageBox.alert('确认删除么？', '删除', {
          confirmButtonText: '确认',
            callback: (action) => {
              deptClass.delDept(item.row.id).then(res => {
                if(res.code == 0){
                  ElMessage.success('删除成功!')
                  getDept()
                }
              })
            },
          })
        },
        type : 'danger'
    },
    {
        label : '详情',
        func : detailFun,
        type : 'primary'
    }
])
    const tableColumns = ref([
        {type : 'index'},
        {
            label : '部门名称',
            prop : 'name',
        },
        {
            label : '排序',
            prop : 'weight',
        },
        // {
        //     label : '状态',
        //     prop : 'status',
        //     slot : 'status',
        //     width : 200
        // },
        {
            label : '创建时间',
            prop : 'createTime',
        },
        {
            label : '操作',
            width:200,
            slot : 'opt'
        },
    ])
const tableData = ref([])
const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>
<style scoped>
.rightDiv{
    width: 98%;
    height: 85vh;
    background-color: rgba(255,255,255,1);
    border: 0px solid rgba(187,187,187,1);
}
</style>